﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Untitled Page</title>
    <link href ="HomeStyle.css" rel="Stylesheet" />
    <script src="Script/jquery-1.5.1.min.js" type="text/javascript"></script>
</head>
<body>
    <!-- header !-->
    <div class="bgHeader" align="center"> 
        <div class="bgTopBorder"></div>
        <div class="bgHeader_inner" align="center">
            <div class="bgHeader_content">
                <div class="bgHeader_content_inner">
                    <div class="bgLogin">
                            <div class="fields">
                                <label>Email của bạn</label>
                                <span class="border"><input type="text" value="" /></span>
                                <div class="bgckbox" ><div class="ckbox" ><div onclick="setEveCkbox(this, 'ckbox_inner', 'ckbox_selected')" class="ckbox_inner"></div></div> Duy trì đăng nhập</div>
                            </div>
                            <div class="fields">
                                <label>Mật khẩu</label>
                                <span class="border"><input type="password" value="" /></span>
                                <a href="#" class="link">Quên mật khẩu?</a>
                            </div>
                            <div class="fields" style="width:auto">
                                <span class="bgbutton"><input type="submit" value="ĐĂNG NHẬP" /></span> 
                            </div>
                    </div>
                </div>
                <div class="bgBotBorder"></div>
            </div>
        </div>
    </div>
    
    <!-- body !-->
    <div class="bgBody"> 
        <div class="bgBody_inner" align="center">
            <div class="bgBody_content">
                <div class="bgBody_content_inner">
                    <div class="bgSignUp">
                        <div class="bgSignUp_inner">
                           <div class="bgTitle">
                               <div class="title">
                                    <div style="width:100%">ĐĂNG KÝ </div>
                                    <i style="font-size:13px;float:left;margin-top:-3px;margin-left:-5px;margin-top:3px;font-weight:700">
                                        <img src="Images/TitleSignUp_v2.jpg" style="font-size:13px;float:left;margin-top:-3px;font-weight:700" alt="hoàn toàn miễn phí"/>
                                    </i>
                               </div>
                               <div class="topLine"></div>
                            </div>
                            <div class="bgfrmLog" >
                                <div class="fields">
                                    <div class="label">Họ và tên: </div>
                                    <span class="border"><input type="text" /></span>
                                </div>

                                <div class="fields">
                                    <div class="label">Email của bạn: </div>
                                    <span class="border"><input type="text" /></span>
                                </div>

                                <div class="fields">
                                    <div class="label">Mật khẩu: </div>
                                    <span class="border"><input type="password" /></span>
                                </div>                                
                                <div class="fields" >
                                    <div class="label"></div>
                                    <span class="bgbutton"><input class="but_border" type="submit" value="ĐĂNG KÝ" /></span> 
                                    <span class="bgbutton bgbutton_cancel"><input class="butcancel_border" type="submit" value="HỦY BỎ" /></span>
                                    
                                </div>
                            </div>
                        
                            <div class="bgfrmLog bgfrmLog_width_01">
                                <div class="fields" >
                                    <table width="100%" cellpadding="0" cellspacing="0">
                                        <tr>
                                            <div id="dropDay" class="bgDropDown bgDropDown_day">
                                                <div>1</div>
                                                <div>2</div>
                                                <div>3</div>
                                                <div>4</div>
                                                <div>5</div>
                                                <div>6</div>
                                                <div>7</div>
                                                <div>8</div>
                                            </div>
                                            <div id="dropMonth" class="bgDropDown bgDropDown_month">
                                                <div>1</div>
                                                <div>2</div>
                                                <div>3</div>
                                            </div>
                                            <div id="dropYear" class="bgDropDown bgDropDown_year">
                                                <div>1970</div>
                                                <div>1971</div>
                                                <div>1972</div>
                                            </div>
                                            
                                            <div id="dropGender" class="bgDropDown bgDropDown_gender">
                                                <div>Nam</div>
                                                <div>Nữ</div>
                                            </div>
                                        
                                            <td>
                                                <div class="label_01" >Ngày sinh: </div>
                                                <span class="border border_01" style="margin-left:0px"><input id="txtDay" type="text" value="Ngày" /><img class="imgDropDown" onclick="viewDropContent('dropDay')"/></span>
                                                <span class="border border_01"><input type="text" id="txtMonth" value="Tháng" /><img class="imgDropDown" onclick="viewDropContent('dropMonth')"/></span>
                                                <span class="border border_01"><input type="text" id="txtYear" value="Năm" /><img class="imgDropDown" onclick="viewDropContent('dropYear')"/></span>
                                                
                                                <div class="label_01">Giới tính: </div>
                                                <span class="border border_01"><input type="text" id="txtGender" value="nam"/> <img class="imgDropDown" onclick="viewDropContent('dropGender')"/></span>
                                            </td>
                                        </tr>
                                    </table>
                                    
                                    
                                    
                                    
                                    
                                </div>
                                <div class="fields">
                                    <div class="label_01">Nhập lại Email: </div>
                                    <span class="border" style="width:44%"><input type="text"  /></span>
                                </div>
                                
                            </div>
                        
                        </div>
                    </div>
                    <div class="bgImageSignUpPage"></div>
                </div>
            </div>
        </div>
    </div>
    
    <!-- footer !-->
    <div class="bgFooter" align="center"> 
        <div class="bgFooter_inner">
            <a href="#" onclick="return false;">TestOnline2012</a> &nbsp; - &nbsp;
            <a href="#">Giới thiệu</a>&nbsp; | &nbsp;
            <a href="#">Điều khoản</a>&nbsp; |&nbsp;
            <a href="#">Liên hệ</a>
                        
        </div>
    </div>
    
    
    <script>
        var is_viewDay = false;
        var is_viewMonth = false;
        var is_viewYear = false;
        var is_viewGender = false;
        
        SethideDropContent('dropDay', 'txtDay');
        SethideDropContent('dropMonth', 'txtMonth');
        SethideDropContent('dropYear', 'txtYear');
        SethideDropContent('dropGender', 'txtGender');
    
        function setEveCkbox(id, clUncheck, clCheck) {
            var class_name = $(id).attr("class");
            //check if selected
            if (class_name.indexOf(clCheck) >= 0) {
                $(id).attr("class", clUncheck);
            }
            else {
                $(id).attr("class", clUncheck + " " + clCheck);
            }
        }

        function viewDropContent(id) {
            if ($("#" + id).size()) {
                var temp = false;
                if (id.toLowerCase().indexOf('day') >= 0) {
                    temp = is_viewDay;
                    is_viewDay = !temp;
                }
                else if (id.toLowerCase().indexOf('month') >= 0) {
                    temp = is_viewMonth;
                    is_viewMonth = !temp;
                }
                else if (id.toLowerCase().indexOf('year') >= 0) {
                    temp = is_viewYear;
                    is_viewYear = !temp;
                }
                else {
                    temp = is_viewGender;
                    is_viewGender = !temp;
                }
            
                if (!temp)
                    $("#" + id).show()
                else
                    $("#" + id).hide()
            }
        }

        function SethideDropContent(id,objInput) {
            if ($("#" + id).size() && $("#" + objInput).size()) {
                $("#" + id + " div").click(function() {
                    $("#" + objInput).val($(this).text())
                    $("#" + id).hide()
                });
            }
        }
    </script>
</body>
</html>
